<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>您好Springboot</title>
	<%--引入函数类库--%>
	<script src="../js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript">
		//1.让页面全部加载完成  函数式变成
		$(function () {
			//alert("ajax调用成功！！")
			// $.get(url地址,参数,回调函数,返回值类型)
			// $.post()
			// $.getJSON
			// $.ajax
			//关于参数写法 2种 1.json格式  2.字符串拼接
			// json:{id:1,name:"tomacat"}    字符串拼接id=1&name=xxx

			$.get("/findAjax",{id:1},function (data) {
				//循环换方式3
				for (let user of data){
					console.log(user);
					let id = user.id;
					let name =user.name;
					let age = user.age;
					let sex = user.sex;
					let tr = "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>";
					$("#table1").append(tr);
				}
				//循环方式1
				// 	for (let i=0;i<data.length;i++){
				// 		let user = data[i];
				// 		let id = user.id;
				// 		let name = user.name;
				// 		console.log((id +":"+name));
				// 	}
				//循环方式2
				// for (let index in data){
				// 	let user = data[index];
				// 	console.log()
				// }
			})

			$.ajax({
				url: "/findAjax",  //url地址
				method: "get",   //请求类型
				data:{id:1,name:"tomcat"},
				success:function (data) {
					for (let user of data){
						console.log(user);
					}
				},
				error:function (data) { alert("访问失败！")},
				cache: true,  //缓存：默认条件下是开启的
				async:true,   //异步: 默认就是异步
			})


		})




	</script>

</head>
<body>
	<table id="table1" border="1px" width="65%" align="center">
		<tr>
			<td colspan="6" align="center"><h3>学生信息</h3></td>
		</tr>
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>年龄</th>
			<th>性别</th>
			<th></th>
		</tr>



	</table>
</body>
</html>